<template>
	<view class="uni-padding-wrap uni-common-mt">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">创建报名</block>
		</cu-custom>
		<view class="bg-white">
			<view class="lsc-create-update-images" :style="[{ backgroundImage:'url(' + (list.iconUrl || '/static/no_pictrue.jpg') + ')' }]">
				<view class="bg-grey radius fr padding-sm" @tap="chooseImage">上传图片</view>
			</view>
		</view>
		<view class="cu-form-group">
			<input placeholder="请输入标题(必填)" name="input" v-model="list.title"></input>
		</view>
		<view class="cu-form-group">
			<textarea maxlength="-1" v-model="list.detail" @input="textareaAInput" placeholder="请输入详细信息"></textarea>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">报名开始时间</view>
			<picker mode="date" :value="list.applyBeginDate" start="2015-09-01" end="2020-09-01" @change="startDateChange" style="padding-right: 0;">
				<view class="lsc-picker">
					{{list.applyBeginDate}}
				</view>
			</picker>
			<picker mode="time" :value="list.applyBeginTime" @change="startTimeChange">
				<view class="picker">
					{{list.applyBeginTime}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">报名截止时间</view>
			<picker mode="date" :value="list.applyEndDate" start="2015-09-01" end="2020-09-01" @change="endDateChange" style="padding-right: 0;">
				<view class="lsc-picker">
					{{list.applyEndDate}}
				</view>
			</picker>
			<picker mode="time" :value="list.applyEndTime" @change="endTimeChange">
				<view class="picker">
					{{list.applyEndTime}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">报名人数</view>
			<view class="lsc-create-input">
				<input name="input" v-model="list.maxCount"></input>
			</view>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">报名收费(最高50万元)</view>
			<switch @change="switchMoneyChange" class='blue' :class="switchMoney?'checked':''" :checked="switchMoney?true:false"></switch>
		</view>
		<view class="cu-form-group" v-if="switchMoney">
			<view class="title">报名费用(元)</view>
			<view class="lsc-create-input">
				<input name="input" v-model="list.fee"></input>
			</view>
		</view>
		<view class="lsc-create-tip">
			温馨提示：会收取1%的费用，用于微信支付服务。
		</view>
		<view class="cu-form-group">
			<view class="title">活动开始/截止时间</view>
			<switch @change="switchActionChange" class='blue' :class="switchAction?'checked':''" :checked="switchAction?true:false"></switch>
		</view>
		<view v-if="switchAction">
			<view class="cu-form-group">
				<view class="title">活动开始时间</view>
				<picker mode="date" :value="list.activityBeginDate" start="2015-09-01" end="2020-09-01" @change="activityBeginChange" style="padding-right: 0;">
					<view class="lsc-picker">
						{{list.activityBeginDate}}
					</view>
				</picker>
				<picker mode="time" :value="list.activityBeginTime" @change="startActionTimeChange">
					<view class="picker">
						{{list.activityBeginTime}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">活动截止时间</view>
				<picker mode="date" :value="list.activityEndDate" start="2015-09-01" end="2020-09-01" @change="endActionChange" style="padding-right: 0;">
					<view class="lsc-picker">
						{{list.activityEndDate}}
					</view>
				</picker>
				<picker mode="time" :value="list.activityEndTime" @change="endActionTimeChange">
					<view class="picker">
						{{list.activityEndTime}}
					</view>
				</picker>
			</view>
		</view>
		<view class="cu-form-group" @tap="chooseLocation">
			<view class="title">活动地址</view>
			<view class="lsc-create-input">{{list.address}}</view>
			<text class='cuIcon-locationfill text-orange'></text>
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				相关图片
			</view>
			<view class="action">
				{{list.photosList.length}}/9
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in list.photosList" :key="index" @tap="ViewPicture" :data-url="list.photosList[index]">
				 <image :src="list.photosList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelPicture" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChoosePicture" v-if="list.photosList.length<9">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="cu-modal drawer-modal justify-start" :class="modalName=='pictureTip'?'show':''" @tap="hidePictureModal">
			<view class="cu-dialog basis-lg" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in 5" :key="index">
						<view class="content">
							<view>Item {{index +1}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lsc-create-dec">
			已选项目(*代表必选)
		</view>
		<view class="cu-form-group">
			<view class='padding-sm flex flex-wrap'>
				<text v-for="(item,index) in tagItems" :key="index">{{item.requiredFlag?'*':''}}{{item.fieldName}}{{tagItems.length>1?'，':''}}</text>
			</view>
		</view>
		<view class="lsc-create-dec">
			点击选择需要填写的信息
		</view>
		<view class="cu-form-group">
			<view class='padding-sm flex flex-wrap'>
				<view class="padding-xs" 
				v-for="(item,index) in tagList" 
				:key="index"
				@tap="chooseTagList(item)">
					<view class='cu-tag' :class="item.isSet?'bg-blue':'line-grey'">{{item.fieldName}}</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalTag?'show':''" @tap="hideModalTag">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-list menu text-left">
					<view class="cu-item" v-for="(item,index) in tagAttribute" :key="index">
						<label class="flex justify-between align-center flex-sub">
							<view class="flex-sub" @tap="tagChange" :data-value="JSON.stringify(item)">{{item.name}}</view>
						</label>
					</view>
				</view>
			</view>
		</view>
		<view class="padding flex flex-wrap align-center bg-white">
			<button class="cu-btn bg-blue" @tap="showDiyAttribute">添加自定义</button>
			<text class="lsc-create-tag-tip">(没有合适信息，可以自定义创建)</text>
		</view>
		<view class="cu-modal bottom-modal" :class="modalDiy?'show':''" @tap="hideModalAttribute">
			<view class="cu-dialog" @tap.stop="">
				<view @tap="hideModalAttribute" style="margin-top: 10px">
					<text class="cuIcon-unfold"></text>
				</view>
				<view class="lsc-create-diy-title">
					<block>选择字段类型</block>
				</view>
				<view class="grid col-3 padding-sm lsc-create-diy">
					<view v-for="(item,index) in checkbox" class="padding-xs text-left" :key="index"  @tap="tagDiyChange" :data-value="item.title">
						<text class="text-blue" :class="item.icon"></text>
						<text>{{' ' + item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-form-group margin-top">
			<view class="title">报名列表显示</view>
			<picker @change="PickerListChange" :value="list.listShowFields" :range="listPicker">
				<view class="picker">
					{{listPicker[list.listShowFields]}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">报名数据权限</view>
			<picker @change="PickerPermissionChange" :value="list.dataAuthority" :range="permissionPicker">
				<view class="picker">
					{{permissionPicker[list.dataAuthority]}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">报名按钮方案</view>
			<picker @change="PickerTextChange" :value="list.applyButtonType" :range="textPicker">
				<view class="picker">
					{{textPicker[list.applyButtonType]}}
				</view>
			</picker>
		</view>
		
		<view class="cu-form-group margin-top">
			<view class="title">参与报名需审核</view>
			<switch @change="enableCheck" class='blue' :class="list.enableCheckFlag?'checked':''" :checked="list.enableCheckFlag?true:false"></switch>
		</view>
		<view class="cu-form-group">
			<view class="title">允许一人多次报名</view>
			<switch @change="switchOneChange" class='blue' :class="switchOne?'checked':''" :checked="switchOne?true:false"></switch>
		</view>
		<view class="cu-form-group" v-if="switchOne">
			<view class="title">代报名人数</view>
			<view class="lsc-create-input">
				<input name="input" v-model="list.agentCount"></input>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">报名后不允许取消报名</view>
			<switch @change="enableCancel" class='blue' :class="list.enableCancelFlag?'checked':''" :checked="list.enableCancelFlag?true:false"></switch>
		</view>
		<view class="cu-form-group">
			<view class="title">名额满后允许排队</view>
			<switch @change="applyQueue" class='blue' :class="list.applyQueueFlag?'checked':''" :checked="list.applyQueueFlag?true:false"></switch>
		</view>
		
		<view class="cu-form-group margin-top">
			<view class="title">发起人信息</view>
			<picker @change="PickerInfoChange" :value="list.sponsorType" :range="infoPicker">
				<view class="picker">
					{{infoPicker[list.sponsorType]}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">发起人署名(必填)</view>
			<input style="text-align: right;" v-model="list.sponsorName" placeholder="发起人署名" name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号(必填)</view>
			<input style="text-align: right;" v-model="list.sponsorPhone" placeholder="请输入手机号" name="input"></input>
			<!-- #ifndef APP-PLUS || H5 -->
			<!-- <input style="text-align: right;" v-model="list.sponsorPhone" placeholder="请输入手机号" name="input"></input> -->
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<!-- <view class="cu-tag radius line-blue">
				自动填写
			</view> -->
			<!-- #endif -->
		</view>
		<view class="cu-form-group">
			<view class="title">发起人微信号</view>
			<input style="text-align: right;" v-model="list.sponsorWechat" placeholder="请输入微信号" name="input"></input>
		</view>
		
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @tap="handleSaveActivity">确认</button>
			<text class="lsc-create-agreement">点击确认即代表阅读并同意《报名服务协议》</text>
		</view>
	</view>
</template>

<script>
		
	import {baseUrl} from '@/config/index';
    import {mapState, mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list: {
					feeSum: '', //	number'总共已经收到报名费
					remarks: '', //	string备注
					
					iconUrl: '', //	string活动头像url
					title: '', //*	string活动标题
					detail: '', //	string活动详细
					applyBeginDate: '2019-12-11', //*	string报名开始日期
					applyBeginTime: '00:00', //*	string报名开始时间
					applyEndDate: '2019-12-12', //*	string报名结束日期
					applyEndTime: '23:59', //*	string报名结束时间
					maxCount: 100, //*	integer($int32)报名人数
					fee: 0, //	number报名费用			
					activityBeginDate: '2019-12-11', //*	string活动开始日期
					activityBeginTime: '00:00', //*	string活动开始时间
					activityEndDate: '2019-12-12', //*	string活动结束日期
					activityEndTime: '23:59', //*	string活动结束时间
					address: '', //	string活动地址
					photosList: [], //	string活动图片
					
					details: [], //字段
					listShowFields: 0, //*	integer($int32)报名列表显示:0默认人数头像和昵称，1人数和头像，2人数，3什么都不显示
					dataAuthority: 0, //*	integer($int32)报名数据权限：0默认管理员可见(保护隐私)，1报名参与人可见，2任何人可见(谨慎选择)
					applyButtonType: 0, // 报名按钮文案:0点击填写,1立即预约,2了解更多,3下一步,4立即报名
					enableCheckFlag: false, //*	integer($int32)参与报名需审核, 0默认不需要，1需要
					agentCount: 0, //	integer($int32)允许代报名人数
					enableCancelFlag: false, //*	integer($int32)报名后不允许取消, 0默认允许取消，1不允许取消
					applyQueueFlag: false, //名额满后允许排队
					sponsorType: 0, //*	integer($int32)发起人认证类型: 0默认个人信息，1已认证信息
					sponsorName: '', //*	string发起人姓名
					sponsorPhone: '', //*	string发起人手机号，需要发送和验证验证码
					sponsorWechat: '', //*	string发起人微信号
				},
				switchOne: false,
				switchMoney: false,
				switchAction: false,
				modalName: null,
				modalTag: false,
				modalDiy: false,
				tagAttribute: [
					{
						id: 0,
						requiredFlag: true,
						isSet: true,
						name: '选为必填项'
					},
					{
						id: 1,
						requiredFlag: false,
						isSet: true,
						name: '选为非必填项'
					}
				],
				tagCookies: {},
				tagItems: [],
				radio: '',
				CustomBar: this.CustomBar,
				tagList: [],
				listIndex: 0,
				listPicker: ['人数、头像和昵称', '人数和头像', '人数', '什么都不显示'], //0默认人数头像和昵称，1人数和头像，2人数，3什么都不显示
				permissionIndex: 0,
				permissionPicker: ['管理员可见(保护隐私)', '报名参与人可见', '任何人可见(谨慎选择)'], //0默认管理员可见(保护隐私)，1报名参与人可见，2任何人可见(谨慎选择)
				textIndex: 0,
				textPicker: ['点击填写', '立即预约', '了解更多', '下一步', '立即报名'], //0点击填写,1立即预约,2了解更多,3下一步,4立即报名
				infoIndex: 0,
				infoPicker: ['个人信息', '已认证信息'], //0默认个人信息，1已认证信息
				checkbox: [
					{
						title: '单行文本',
						icon: 'cuIcon-edit',
					},
					{
						title: '多行文本',
						icon: 'cuIcon-edit',
					},
					{
						title: '数字',
						icon: 'cuIcon-edit',
					},
					{
						title: '日期',
						icon: 'cuIcon-edit',
					},
					{
						title: '时间',
						icon: 'cuIcon-edit',
					},
					{
						title: '手机号',
						icon: 'cuIcon-edit',
					},
					{
						title: '单项选择',
						icon: 'cuIcon-edit',
					},
					{
						title: '多项选择',
						icon: 'cuIcon-edit',
					},
					{
						title: '下拉框',
						icon: 'cuIcon-edit',
					},
					{
						title: '地理位置',
						icon: 'cuIcon-edit',
					},
					{
						title: '上传单图',
						icon: 'cuIcon-edit',
					},
					{
						title: '上传多图',
						icon: 'cuIcon-edit',
					},
					{
						title: '省/市/区',
						icon: 'cuIcon-edit',
					},
					{
						title: '手写签名',
						icon: 'cuIcon-edit',
					},
					{
						title: '标签',
						icon: 'cuIcon-edit',
					}
				]
			};
		},
		computed: mapState(['fieldData']),
		onLoad() {},
		onShow() {
			if(this.fieldData) {
				this.tagList.push(this.fieldData)
				this.getField(null)
			}
		},
		onReady() {
			// 获取字段标签
			const TagList = ()=> {
				uni.request({
					url: `${baseUrl}/activity/listCommFields`,
					method: 'get',
					success: res => {
						if(res.data.recode !== '100') {
							uni.showToast({
							    icon: 'none',
							    title: res.data.msg,
							});
							return
						}
						const data = res.data.data
						this.tagList = data
						this.list.details = this.tagItems = data.slice(0,3)
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '请求超时',
						});
						return
					},
					complete: () => {}
				});
			}
			TagList()
		},
		methods: {
			...mapMutations(['getField']),
			chooseImage() {
				uni.chooseImage({
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					count: 1,
					success: (res) => {
						// this.list.imageList = []
						// this.list.imageList = this.list.imageList.concat(res.tempFilePaths);
						this.list.iconUrl = res.tempFilePaths[0]
					}
				})
			},
			ChoosePicture() {
				if(this.list.photosList.length >= 9) {
					this.modalName = 'pictureTip'
					return
				}
				uni.chooseImage({
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					count: 9,
					success: (res) => {
						if (this.list.photosList.length != 0) {
							this.list.photosList = this.list.photosList.concat(res.tempFilePaths)
						} else {
							this.list.photosList = res.tempFilePaths
						}
					}
				})
			},
			ViewPicture(e) {
				uni.previewImage({
					urls: this.list.photosList,
					current: e.currentTarget.dataset.url
				});
			},
			DelPicture(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.list.photosList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.list.address = res.address
					}
				})
			},
			textareaAInput(e) {
				this.list.detail = e.detail.value
			},
			startDateChange(e) {
				this.list.applyBeginDate = e.detail.value
			},
			startTimeChange(e) {
				this.list.applyBeginTime = e.detail.value
			},
			endDateChange(e) {
				this.list.applyEndDate = e.detail.value
			},
			endTimeChange(e) {
				this.list.applyEndTime = e.detail.value
			},
			switchMoneyChange(e) {
				this.switchMoney = e.detail.value
			},
			switchActionChange(e) {
				this.switchAction = e.detail.value
			},
			activityBeginChange(e) {
				this.list.activityBeginDate = e.detail.value
			},
			startActionTimeChange(e) {
				this.list.activityBeginTime = e.detail.value
			},
			endActionChange(e) {
				this.list.activityEndDate = e.detail.value
			},
			endActionTimeChange(e) {
				this.list.activityEndTime = e.detail.value
			},
			hidePictureModal() {
				this.modalName = null
			},
			chooseTagList(e) {
				if(e.id === 1 || e.id ===2 || e.id ===3) {
					uni.showToast({
						icon: 'none',
						title: '默认必填项，不可更改',
						duration: 1000
					})
					return
				}
				this.modalTag = true
				this.tagCookies = {}
				if(e.isSet) {
					this.tagAttribute.push({
						id: 2,
						requiredFlag: false,
						isSet: false,
						name: '不选'
					})
				}
				this.tagCookies = e
			},
			hideModalTag() {
				this.modalTag = false
				if(this.tagAttribute.length >= 3)
					setTimeout(()=> {this.tagAttribute.pop()}, 600);
			},
			tagChange(e) {
				this.hideModalTag()
				const data = JSON.parse(e.currentTarget.dataset.value)
				const IDs = this.tagCookies.id || this.tagCookies.index
				//不选
				if(!data.isSet) {
					this.tagItems = this.tagItems.filter(ele=> (ele.id || ele.index) !== IDs);
					this.tagList.forEach(element => {
						if((element.id || element.index) === IDs) {
							element.isSet = false
						}
					})
					
					this.list.details = this.tagItems
					return
				}
				
				//选中
				this.tagItems = this.tagItems.filter(ele=> (ele.id || ele.index)!==IDs)
				
				Object.assign(this.tagCookies, {
					requiredFlag: data.requiredFlag,
					isSet: data.isSet
				})
				this.tagItems.push(this.tagCookies)
				this.list.details = this.tagItems
			},
			showDiyAttribute() {
				this.modalDiy = true
			},
			hideModalAttribute() {
				this.modalDiy = false
			},
			tagDiyChange(e) {
				this.hideModalAttribute()
				const title = e.currentTarget.dataset.value
				uni.navigateTo({
					url: `/pages/main/create/diy?title=${title}&id=${this.tagList.length}`,
				});
			},
			enableCheck(e) {
				this.list.enableCheckFlag = e.detail.value
			},
			switchOneChange(e) {
				this.switchOne = e.detail.value
			},
			enableCancel(e) {
				this.list.enableCancelFlag = e.detail.value
			},
			applyQueue(e) {
				this.list.applyQueueFlag = e.detail.value
			},
			PickerListChange(e) {
				this.list.listShowFields = e.detail.value
			},
			PickerPermissionChange(e) {
				this.list.dataAuthority = e.detail.value
			},
			PickerTextChange(e) {
				this.list.applyButtonType = e.detail.value
			},
			PickerInfoChange(e) {
				this.list.sponsorType = e.detail.value
			},
			handleSaveActivity() {
				if(this.validateList()) {
					uni.showToast({
						icon: 'none',
						title: '请填写必填信息',
						duration: 1500
					})
					return
				}
				uni.showLoading({
				    title: '保存中'
				});
				uni.request({
					url: `${baseUrl}/activity/save`,
					method: 'POST',
					data: this.list,
					success: res => {
						uni.hideLoading()
						setTimeout(function() {
							uni.showToast({
								icon: 'success',
								title: '保存成功',
								duration: 1500
							})
						}, 10);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			validateList() {
				let Flag = false
				const List =  this.list
				if(!List.title || !List.sponsorName || !List.sponsorPhone ) {
					Flag = true
				}
				return Flag
			},
		}
	};
</script>

<style>
	.lsc-create-update-images {
		height: 500upx; 
		width: 100vw;
		background-size: 100%;
		padding: 10px;
	}
	.lsc-picker {
		text-align: right;
	}
	.lsc-create-input {
		text-align: right;
		width: 65%;
	}
	.lsc-create-tip {
		color: orangered;
		padding: 10px 20px;
		font-size: 12px;
	}
	.lsc-create-dec {
		color: #AAAAAA;
		padding: 10px 20px;
		font-size: 12px;
	}
	.lsc-create-tag {
		float: left;
	}
	.lsc-create-tag-tip {
		padding-left: 10px;
		color: #AAAAAA;
	}
	.lsc-create-agreement {
		padding: 20upx;
		text-align: center;
		color: #AAAAAA;
		font-size: 22upx;
	}
	.lsc-create-diy {
		border: 1px solid #AAAAAA;
		margin: 20upx;
	}
	.lsc-create-diy-title {
		padding-left: 25upx;
		text-align: left;
		color: #AAAAAA;
	}
</style>
